<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0100: SFX - Button Interactions II - Color, Font, &amp; Shape | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0100: SFX - Button Interactions II - Color, Font, &amp; Shape" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="This GTK Tutorial covers interactions between buttons using CSS to change color, font and shape." />
<meta property="og:description" content="This GTK Tutorial covers interactions between buttons using CSS to change color, font and shape." />
<link rel="canonical" href="http://localhost:4000/posts/0100-sfx-button-interactions-ii-color-font-shape.html" />
<meta property="og:url" content="http://localhost:4000/posts/0100-sfx-button-interactions-ii-color-font-shape.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-01-28T00:00:00-05:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0100: SFX - Button Interactions II - Color, Font, &amp; Shape" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2020-01-28T00:00:00-05:00","datePublished":"2020-01-28T00:00:00-05:00","description":"This GTK Tutorial covers interactions between buttons using CSS to change color, font and shape.","headline":"0100: SFX - Button Interactions II - Color, Font, &amp; Shape","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0100-sfx-button-interactions-ii-color-font-shape.html"},"url":"http://localhost:4000/posts/0100-sfx-button-interactions-ii-color-font-shape.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/sfx.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2020-01-28T00:00:00-05:00" itemprop="datePublished">Tuesday, January 28, 2020
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0100-sfx---button-interactions-ii--changing-color-font--shape">0100: SFX - Button Interactions II – Changing Color, Font, &amp; Shape</h1>

<p>Great Smokin’ Widgets! It’s the <em>100th GtkDcoding Blog Post</em>!</p>

<p>It’s been just over a year since I started this blog and I really didn’t think it would last this long. But thanks to the encouragement and sponsorship of readers—the latter through <em>GtkDcoding</em>’s acceptance into the <em>GitHub Sponsorship</em> program—here we are.</p>

<p>I thank you all from the bottom of my heart. (This is when we clink glasses.)</p>

<p>Now that we’ve had a little bit of a celebration, let’s turn to the subject of the day: continuing to fulfill Joel Christensen’s request to affect the appearance of one <code class="language-plaintext highlighter-rouge">Button</code> by clicking another <code class="language-plaintext highlighter-rouge">Button</code>.</p>

<p>This time around, we won’t just affect the appearance, but also the colour and shape of the <code class="language-plaintext highlighter-rouge">Button</code>s, all with the help of a <em>CSS</em> object, starting with…</p>

<h2 id="swapping-the-buttons-background-color">Swapping the Button’s Background Color</h2>

<!-- 0, 1 -->
<!-- first occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/016_sfx/sfx_02.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/016_sfx/sfx_02_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/016_sfx/sfx_02_button_to_button_color.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for first (1st) occurrence of application and terminal screen shots on a single page -->

<p>The first demo today will involve the two buttons changing each other’s background colour and for that purpose, we’ll bring back <code class="language-plaintext highlighter-rouge">Ralph</code> and <code class="language-plaintext highlighter-rouge">George</code> again. To understand the changes that bring this about, we’ll start by looking at…</p>

<h3 id="the-appbox">The AppBox</h3>

<p>In the <code class="language-plaintext highlighter-rouge">AppBox</code> preamble, we add a single line:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">int</span><span class="p">[</span><span class="nb">string</span><span class="p">]</span> <span class="n">colorNumbers</span><span class="p">;</span>
</code></pre></div></div>

<p>And that’s put to use in the constructor:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">this</span><span class="p">()</span>
<span class="p">{</span>
	<span class="k">super</span><span class="p">(</span><span class="n">Orientation</span><span class="p">.</span><span class="n">HORIZONTAL</span><span class="p">,</span> <span class="n">globalPadding</span><span class="p">);</span>
	<span class="n">colorNumbers</span> <span class="p">=</span> <span class="p">[</span><span class="s">"red"</span> <span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="s">"blue"</span> <span class="p">:</span> <span class="mi">1</span><span class="p">];</span>
		
	<span class="n">pingButton</span> <span class="p">=</span> <span class="k">new</span> <span class="n">PingPongButton</span><span class="p">(</span><span class="n">ralph</span><span class="p">,</span> <span class="n">colorNumbers</span><span class="p">[</span><span class="s">"red"</span><span class="p">]);</span>
	<span class="n">packStart</span><span class="p">(</span><span class="n">pingButton</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="n">localPadding</span><span class="p">);</span>

	<span class="n">pongButton</span> <span class="p">=</span> <span class="k">new</span> <span class="n">PingPongButton</span><span class="p">(</span><span class="n">george</span><span class="p">,</span> <span class="n">colorNumbers</span><span class="p">[</span><span class="s">"blue"</span><span class="p">]);</span>
	<span class="n">packStart</span><span class="p">(</span><span class="n">pongButton</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="kc">false</span><span class="p">,</span> <span class="n">localPadding</span><span class="p">);</span>

	<span class="c1">// partner up the buttons</span>
	<span class="n">pingButton</span><span class="p">.</span><span class="n">addPartner</span><span class="p">(</span><span class="n">pongButton</span><span class="p">);</span>
	<span class="n">pongButton</span><span class="p">.</span><span class="n">addPartner</span><span class="p">(</span><span class="n">pingButton</span><span class="p">);</span>
		
<span class="p">}</span> <span class="c1">// this()</span>
</code></pre></div></div>

<p>As we’ve had to do before with associative arrays, we hold off initializing the <code class="language-plaintext highlighter-rouge">colorNumbers</code> array until the constructor to avoid compiler errors.</p>

<p>Also, this means we’ll be passing in a second argument when instantiating a <code class="language-plaintext highlighter-rouge">PingPongButton</code>. We supply not just the button’s name, but it’s initial background color as well. Everything else here is the same.</p>

<h3 id="the-css-class">The CSS Class</h3>

<p>As it is in <em>HTML</em> pages, <em>CSS</em> can be dynamic in a <em>GTK</em> application. We’ve looked at <em>CSS</em> before when we discussed <code class="language-plaintext highlighter-rouge">Frame</code> borders (<a href="./0073-frame-part-ii.html">Blog Post #0073</a>) and again in the posts covering customized <code class="language-plaintext highlighter-rouge">Notebook</code> tabs (<a href="./0077-notebook-i-basics.html">Blog Post #0077</a>).</p>

<p>This time, we’ll use the <em>CSS</em> a little differently, but changes to the <em>CSS</em> class aren’t that drastic. In fact, there’s really only one change. In previous examples, we defined one <em>CSS</em> selector for each element, but here, we define two:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">enum</span> <span class="n">LABEL_CSS</span> <span class="p">=</span> <span class="s">".text-button#pingpongred
			{
				background: #FFBFBF;
			}
			.text-button#pingpongblue
			{
				background: #BFC7FF;
			}"</span><span class="p">;</span>
</code></pre></div></div>

<p>And that’s so we can ping-pong back and forth between them. Speaking of which, let’s look at the changes in the <code class="language-plaintext highlighter-rouge">PingPongButton</code> class that make this possible…</p>

<h3 id="the-pingpongbutton-class">The PingPongButton Class</h3>

<p>Changes start in the preamble where we add these two lines:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">string</span><span class="p">[]</span> <span class="n">labelNames</span> <span class="p">=</span> <span class="p">[</span><span class="s">"pingpongred"</span><span class="p">,</span> <span class="s">"pingpongblue"</span><span class="p">];</span>
<span class="n">CSS</span> <span class="n">css</span><span class="p">;</span>
</code></pre></div></div>

<p>If you recall, the way to engage <em>CSS</em> within a <em>GTK</em> application is to associate a <em>CSS</em> selector with the <code class="language-plaintext highlighter-rouge">Widget</code> by invoking the <code class="language-plaintext highlighter-rouge">Widget</code>’s <em>CSS</em> name. If the <code class="language-plaintext highlighter-rouge">Widget</code> doesn’t have a <em>CSS</em> name, we need to supply one that matches a selector defined in the <code class="language-plaintext highlighter-rouge">LABEL_CSS</code> enum shown above. To get the <code class="language-plaintext highlighter-rouge">Widget</code> to switch between two selectors, we use the <code class="language-plaintext highlighter-rouge">labelNames</code> array in <code class="language-plaintext highlighter-rouge">PingPongButton</code> to bounce back and forth between the two possible <em>CSS</em> names.</p>

<p>And, of course, we supply the <code class="language-plaintext highlighter-rouge">PingPongButton</code> with its initial <em>CSS</em> name and give it access to the <em>CSS</em> object with these statements:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">setName</span><span class="p">(</span><span class="n">labelNames</span><span class="p">[</span><span class="n">color</span><span class="p">]);</span>
<span class="n">css</span> <span class="p">=</span> <span class="k">new</span> <span class="n">CSS</span><span class="p">(</span><span class="n">getStyleContext</span><span class="p">());</span>
</code></pre></div></div>

<p>And, as usual, we instantiate a <em>CSS</em> object as the final stage to making the <em>CSS</em> available to the <code class="language-plaintext highlighter-rouge">PingPongButton</code>.</p>

<p>Lastly, we add these lines to the <code class="language-plaintext highlighter-rouge">onButtonPress()</code> callback:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">if</span><span class="p">(</span><span class="n">partnerButton</span><span class="p">.</span><span class="n">getName</span><span class="p">()</span> <span class="p">==</span> <span class="s">"pingpongred"</span><span class="p">)</span>
<span class="p">{</span>
	<span class="n">writeln</span><span class="p">(</span><span class="s">"CSS name is red, switching to blue"</span><span class="p">);</span>
	<span class="n">partnerButton</span><span class="p">.</span><span class="n">setName</span><span class="p">(</span><span class="s">"pingpongblue"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span>
<span class="p">{</span>
	<span class="n">writeln</span><span class="p">(</span><span class="s">"CSS name is blue, switching to red"</span><span class="p">);</span>
	<span class="n">partnerButton</span><span class="p">.</span><span class="n">setName</span><span class="p">(</span><span class="s">"pingpongred"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>

<p>And that brings about the ping-pong effect in the companion <code class="language-plaintext highlighter-rouge">Button</code>.</p>

<h2 id="one-final-example">One Final Example</h2>

<!-- 2, 3 -->
<!-- second occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/016_sfx/sfx_03.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/016_sfx/sfx_03_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/016_sfx/sfx_03_button_to_button_font.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for second (2nd) occurrence of application and terminal screen shots on a single page -->

<p>In this demo, we change the font and the roundness of the <code class="language-plaintext highlighter-rouge">Button</code> corners, but the only thing we need to do is change the details of the <em>CSS</em> selectors like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">enum</span> <span class="n">LABEL_CSS</span> <span class="p">=</span> <span class="s">".text-button#pingpongred
			{
				font-family: Times New Roman;
				border-radius: 20px;
			}
			.text-button#pingpongblue
			{
				font-family: Arial;
			}"</span><span class="p">;</span>
</code></pre></div></div>

<p>Just a side note: the border-radius rule in the <code class="language-plaintext highlighter-rouge">pingpongred</code> selector can be just about any whole number, but for maximum roundness, it’s got to be at least <code class="language-plaintext highlighter-rouge">20</code>. Anything larger won’t make enough visible difference to matter. Anything smaller (you can go as low as <code class="language-plaintext highlighter-rouge">1</code>) will diminish the roundness until the effect is the same as not using border-radius.</p>

<h2 id="conclusion">Conclusion</h2>

<p>And there you have it, another technique you can use to keep your user oriented (or disoriented, if that’s your aim) to changes in your application. It’s not the kind of thing you’d use just any old time, but if you need to—for instance—tell your user to think carefully about clicking <code class="language-plaintext highlighter-rouge">Button</code>s in a certain order, turning one of them red may help get the point across.</p>

<p>And so we bring our 100th posting celebration to a close. Along with those 100 posts go nearly 200 demos of the various features of <em>GTK</em>. I hope you’ve had as much fun reading them as I’ve had writing them.</p>

<h2 id="hiatus">Hiatus</h2>

<p>Because of other commitments encroaching on my time, I’ll be slowing things down here on the GtkD Coding Blog. Postings will be sporadic for a while, but will continue, so keep those cards and letters coming in while I try to sort out the rest of my life. I’ll still be keeping an eye on my email and on the various forums, so if you have questions or comments, please don’t hesitate to get in touch.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0099-sfx-button-interactions-i-text-labels.html">Next: SFX - Changing Button Text</a>
	</div>
<!--
	<div style="float: right;">
		<a href="./0101-grid-css-compliant-colors.html">Next: Grid with GTK 4.x-compliant CSS Colors</a>
	</div>
-->
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0100-sfx-button-interactions-ii-color-font-shape.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
